<template>
  <div class="table-title">
    <a-button type="primary" @click="showForm=true;">上传视频</a-button>
  </div>
  <!-- 表格 -->
  <a-table :data-source="videos" :scroll="{y:400}" class="scroll-y-table">
    <a-table-column :width="100" key="Id" title="编号" data-index="Id">
      <template v-slot="{index}">{{ index + 1 }}</template>
    </a-table-column>
    <a-table-column key="name" title="名称" data-index="name"/>
    <a-table-column key="operation" title="名称" data-index="Id">
      <template v-slot="{text,record}">
        <a-button type="link" @click="showVideo=true;showVideoId=text;showVideoName=record.name">预览</a-button>
        <a-divider type="vertical"/>
        <a-button type="link" @click="updateVideo(record)">修改</a-button>
        <a-divider type="vertical"/>
        <a-button type="link" @click="del(text)">删除</a-button>
      </template>
    </a-table-column>
  </a-table>
  <!-- 视频预览 -->
  <a-modal v-model:visible="showVideo" :width="1100" :title="showVideoName" :footer="false" :destroyOnClose="true">
    <video :src="`/api/video/get-video?id=${showVideoId}`" style="width: 100%;" controls></video>
  </a-modal>
  <!-- 表单 -->
  <a-modal v-model:visible="showForm" :title="updateVideoName || '上传视频'" @ok="submit" @cancel="onCancel" :confirmLoading="confirmLoading">
    <a-form
        :label-col="{span:4}"
        :model="formState"
        ref="formRef"
    >
      <a-form-item label="视频名称" name="name" :rules="[
              {required: true,message:'请输入视频名称'}
          ]">
        <a-input v-model:value="formState.name"/>
      </a-form-item>
      <a-form-item label="视频" name="video" :rules="[
              {required: true,message:'请选择视频'}
          ]">
        <a-upload-dragger
            accept="video/*"
            :showUploadList="false"
            :beforeUpload="videoChange"
        >
          <video :src="videoUrl" v-if="videoUrl" controls width="380"></video>
          <template v-else>
            <p class="ant-upload-drag-icon">
              <PlusOutlined/>
            </p>
            <p class="ant-upload-text">点击或拖拽到此处上传视频</p>
          </template>
        </a-upload-dragger>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import {getVideosApi, updateVideoApi, uploadVideoApi, delVideoApi} from "@/apis/course";
import {computed, defineProps, reactive, ref} from "vue";
import {PlusOutlined} from '@ant-design/icons-vue'
import type {FormInstance} from "ant-design-vue";
import {message} from "ant-design-vue";

const {courseId} = defineProps<{ courseId: number }>()

const videos = ref<any[]>();
const getVideos = async () => {
  const {data} = await getVideosApi(courseId);
  videos.value = data.data;
}
getVideos();

// 视频预览
const showVideo = ref(false);
const showVideoId = ref(0);
const showVideoName = ref('');

// 表单
const showForm = ref(false);  // 表单弹出
const formRef = ref<FormInstance>();  // 表单实例
const formState = reactive<{  // 表单数据
  name: string;
  video: File | null | string
}>({
  name: '',
  video: null
})
const videoChange = (f: File) => {  // 视频上传
  formState.video = f;
  return false
}
const videoUrl = computed(() => formState.video instanceof File
    ?
    URL.createObjectURL(formState.video)
    :
    formState.video as string
)

const confirmLoading= ref(false);

// 提交
const submit = async () => {
  await formRef.value?.validate();
  confirmLoading.value = true;
  if (!updateVideoId.value) {
    await uploadVideoApi({...formState, course_id: courseId});
  } else {
    await updateVideoApi(formState, updateVideoId.value);
  }
  confirmLoading.value = false;
  message.success('上传成功');
  showForm.value = false;
  onCancel();
  await getVideos();
}

const updateVideo = (info: { Id: number; name: string; }) => {
  updateVideoId.value = info.Id;
  showForm.value = true;
  formState.name = info.name;
  formState.video = (import.meta.env.MODE === 'development' ? '/api' : '') + '/video/get-video?id=' + info.Id;
}

// 修改的视频id
const updateVideoId = ref(0);
const updateVideoName = ref('');

const onCancel = () => {
  updateVideoId.value = 0;
  Object.assign(formState, {
    name: '',
    video: null
  });
}

const del = async (id: number) => {
  await delVideoApi(id)
  message.success('删除成功');
  await getVideos();
}


</script>

<style scoped>

</style>